<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>SACC智能车美管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/public/layuiadmin/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/public/layuiadmin/style/admin.css" media="all"/>
    <link rel="stylesheet" href="/public/css/login.css?t=${toolsUtils.getTimeValue()}" media="all"/>
    <style>
        /* 覆盖原框架样式 */
        .layui-elem-quote{background-color: inherit!important;}
        .layui-input, .layui-select, .layui-textarea{background-color: inherit; padding-left: 30px;}
        .img-src {width: 100%;height: 100%;}
    </style>
</head>
<body>
<!-- Head -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12">
            <div>
            <img src="/public/images/login_logo.png">
                <span style="font-weight: bold;font-size: 25px;">SACC智能车美管理系统</span>
            </div>
        </div>
    </div>
</div>
<!-- Head End -->

#{set t:toolsUtils.getTimeValue()}#{/set}
<!-- Carousel -->
<div class="layui-row">
    <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin">
            <div carousel-item="">
                <div>
                    <div class="zyl_login_cont"></div>
                </div>
                <div>
                    <img src="http://image.djcars.cn/sacc/1.jpg?t=${t}" class="img-src"/>
                </div>
                <div>
                    <img src="http://image.djcars.cn/sacc/2.jpg?t=${t}" class="img-src"/>
                </div>
                <div>
                    <img src="http://image.djcars.cn/sacc/3.jpg?t=?t=${t}" class="img-src"/>
                </div>
                <div>
                    <img src="http://image.djcars.cn/sacc/4.jpg?t=${t}" class="img-src"/>
                </div>
                <div>
                    <img src="http://image.djcars.cn/sacc/5.jpg?t=${t}" class="img-src"/>
                </div>
                <div>
                    <img src="http://image.djcars.cn/sacc/6.jpg?t=${t}" class="img-src"/>
                </div>
                <div>
                    <img src="http://image.djcars.cn/sacc/7.jpg?t=${t}" class="img-src"/>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Carousel End -->

<!-- Footer -->
<div class="layui-trans layadmin-user-login-footer">

    <div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar_01">
        <p>版权所有@2019-2020&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.saccanywhere.com" target="_blank">广州市德芯汽车服务管理有限公司</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;粤ICP备19160392号-1</p>
    </div>
</div>
<!-- Footer End -->


<!-- LoginForm -->
<div class="zyl_lofo_main">
    <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
        <legend>欢迎登陆 - SACC智能车美管理系统</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
        <div class="layui-form zyl_pad_01">
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-form-item">
                    <input type="text" name="username" lay-verify="required|userName" autocomplete="off" placeholder="账号" class="layui-input">
                    <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-form-item">
                    <input type="password" name="password" lay-verify="required|pass" autocomplete="off" placeholder="密码" class="layui-input">
                    <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-row">
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                        <div class="layui-form-item">
                            <input type="text" name="vercode" id="vercode" lay-verify="required|vercodes" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
                            <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
                        </div>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                        <div class="zyl_lofo_vercode zylVerCode">
                            <a href="#" title="看不清?点击图片换一换">
                                <img src="/shows" id="captchaImg">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <button class="layui-btn layui-btn-fluid" style="background-color: #52C5F4;" lay-submit="" id="LAY-user-login-submit" lay-filter="LAY-user-login-submit">立即登录</button>
            </div>
        </div>
    </div>
</div>
<!-- LoginForm End -->
<script type="text/javascript" src="/public/js/jquery.min.js"></script>
<!-- Layui Js -->
<script type="text/javascript" src="/public/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/public/js/jparticle.min.js"></script>
<input type="hidden" id="isTop" value="${isTop}">
<script>
    layui.config({
        base: '/public/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'user','carousel','layer'], function(){
        var $ = layui.$
                ,carousel = layui.carousel
                ,admin = layui.admin
                ,form = layui.form
                ,layer = layui.layer
                ,router = layui.router()
                ,search = router.search;

        form.render();
        //校验失效了 强制跳转到登录页面
        if(parseInt($("#isTop").val())==1){
            layer.msg("登录失效,请重新登录",{time:2000},function () {
                top.location.href="/login";
            });
        }

        //提交
        form.on('submit(LAY-user-login-submit)', function(obj){

            //请求登入接口
            admin.req({
                url: '/postLogin' //实际使用请改成服务端真实接口
                ,data: obj.field
                ,done: function(res){
                    //登入成功的提示与跳转
                    location.href = '../'; //后台主页
                }
            });

        });

        // 监听Enter键登录
        $('#vercode').on('keydown', function (event) {
            if (event.keyCode === 13) {
                $("#LAY-user-login-submit").trigger("click");
            }
        });



        //设置轮播主体高度
        var zyl_login_height = $(window).height()/1.25;
        var zyl_car_height = $(".zyl_login_height").css("cssText","height:" + zyl_login_height + "px!important");


        //Login轮播主体
        carousel.render({
            elem: '#zyllogin'//指向容器选择器
            ,width: '100%' //设置容器宽度
            ,height:'zyl_car_height'
            ,arrow: 'always' //始终显示箭头
            ,anim: 'fade' //切换动画方式
            ,autoplay: true //是否自动切换false true
            ,arrow: 'hover' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
            ,indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
            ,interval: '5000' //自动切换时间:单位：ms（毫秒）
        });

        //粒子线条
        $(".zyl_login_cont").jParticle({
            background: "rgba(0,0,0,0)",//背景颜色
            color: "#fff",//粒子和连线的颜色
            particlesNumber:100,//粒子数量
            //disableLinks:true,//禁止粒子间连线
            //disableMouse:true,//禁止粒子间连线(鼠标)
            particle: {
                minSize: 1,//最小粒子
                maxSize: 3,//最大粒子
                speed: 30,//粒子的动画速度
            }
        });

    });

</script>
</body>
</html>
